<template>
    <div class="wrap">
        <template>
            <div class="wrap-head">
                <a-space>
                    <a-space>
                        <a-button v-if="isCatalogue" @click="onCallBackChange">昼夜安全评价</a-button>
                        <a-space v-else-if="list.length > 0">
                            <PPTDelete :onCallBack="onCallBack" :item="list[0]"></PPTDelete>
                        </a-space>
                        <div></div>
                    </a-space>
                    <showModalTable type="ppt" :buttonSet="{ size: 'default' }" v-if="isCatalogue"
                        :onCallBack="questPostData"></showModalTable>
                </a-space>
                <a-space>
                    <ZsSelectData :formData="otherData" :onCallBack="onCallBack" dataIndex="startTime" :menuId="menuId">
                    </ZsSelectData>
                </a-space>
            </div>
            <div class="wrap-content" :style="isCatalogue ? { background: 'none' } : {}"
                :class="{ imgPositionClass: imgPositionClass }">
                <template v-if="isCatalogue">
                    <a-spin :spinning="menuLoading" style="width: 100%;">
                        <div class="wrap-content-catalogue">
                            <div class="wrap-content-catalogue-title">{{ formMater(otherData.startTime, 'MM月DD日')
                                }}西联公司昼夜安全评价
                            </div>
                            <div class="wrap-content-catalogue-subTitle">
                                <!-- 这个 是展示当前天下的所有页数 -->
                                <!-- <a-space direction="vertical">
                            <div v-for="(item, index) in catalogueInfo.list" :key="item.label"
                                @click="listHanderClick(index)" style="cursor: pointer;">
                                <span>{{ `${chineseCharactersNum(index)}、`
                                    }}</span>
                                <span>{{ `${item.createTime} ${item.dept} ${item.user}查纠到${item.title}` }}</span>
                            </div>
                        </a-space> -->
                                <!-- 第一版 -->
                                <!-- <a-space direction="vertical">
                            <div class="spaceRow" v-for="(item, index) in catalogueInfo.echartData" :key="item.label">
                                <span>{{ `${chineseCharactersNum(index)}、`
                                    }}</span>
                                <span>{{ `${item.label} ${item.value}次` }}</span>
                            </div>
                        </a-space> -->
                                <a-row class="newInfoWrap">
                                    <a-col :span="24" :offset="0">
                                        <a-row class="newInfoWrap-row" :gutter="[16, 24]">
                                            <a-col class="newInfoWrap-row-item" :span="6"
                                                v-for="(item, index) in catalogueInfo.echartData" :key="item.label">
                                                <div class="newInfoWrap-row-item-wrap " :class="`colorAn${index}`">
                                                    <span class="newInfoWrap-row-item-wrap-num">{{ item.value }}</span>
                                                    <div class="newInfoWrap-row-item-wrap-label">{{ item.label }}</div>
                                                </div>
                                            </a-col>
                                        </a-row>
                                    </a-col>
                                </a-row>
                            </div>
                            <div class="wrap-content-catalogue-echarts">
                                <ManageEchart type="bar"
                                    :setting="{ isShow: true, label: { color: '#000000' }, barMaxWidth: 30, fontSize: 11, labelFormter: 8, }"
                                    :data="catalogueInfo.echartData">
                                </ManageEchart>
                            </div>
                        </div>
                    </a-spin>
                </template>
                <template v-else>
                    <template v-if="list.length > 0">
                        <div class="wrap-content-left">
                            <div class="wrap-content-left-top">
                                <div class="wrap-content-left-info yellow">整改前</div>
                                <viewer class="autoClass">
                                    <a-row class="autoClass">
                                        <a-col class="autoHeight imgCol" :span="colSpanf(list[0].beforeRectification)"
                                            v-for="(item, index) in list[0].beforeRectification" :key="index">
                                            <img class="autoClass imgClass" :src="item" />
                                            <PPTImgEdit :onCallBack="questPostData"
                                                :item="{ url: item, id: `${list[0]['beforeRectificationId']}` }">
                                            </PPTImgEdit>
                                        </a-col>
                                    </a-row>
                                </viewer>
                            </div>
                            <div class="wrap-content-left-end">
                                <div class="wrap-content-left-info yellow" v-if="list[0].afterRectification.length > 0">
                                    整改后</div>
                                <viewer class="autoClass">
                                    <a-row class="autoClass">
                                        <a-col class="autoHeight imgCol" :span="colSpanf(list[0].afterRectification)"
                                            v-for="(item, index) in list[0].afterRectification" :key="index">
                                            <img class="autoClass imgClass" :src="item" />
                                            <PPTImgEdit :onCallBack="questPostData"
                                                :item="{ url: item, id: `${list[0]['afterRectificationId']}` }">
                                            </PPTImgEdit>
                                        </a-col>
                                    </a-row>
                                </viewer>
                            </div>
                        </div>
                        <div class="wrap-content-right">
                            <div class="wrap-content-right-top">{{ list[0].title }}</div>
                            <div class="wrap-content-right-content" v-if="list[0].fill == 'text'">
                                <a-row v-for="item in list[0].data" :key="item.label" style="margin-bottom: 12px;">
                                    <span class="black">{{ item.label }}</span>
                                    <span class="black">：</span>
                                    <span>{{ item.value }}</span>
                                </a-row>
                            </div>
                            <div v-else>
                                <PPTTable></PPTTable>
                            </div>
                        </div>
                    </template>
                    <div v-else class="wrap-content-empty">
                        <a-spin v-if="loading"></a-spin>
                        <a-empty v-else />
                    </div>
                </template>
            </div>
            <div class="wrap-footer">
                <a-space>
                    共<span style="padding: 0px 4px">{{ total }}</span>条
                </a-space>
                <a-space>
                    <a-button @click="handChangeCatalogueClick(!isCatalogue)"
                        :type="isCatalogue ? 'primary' : 'default'">目录</a-button>
                    <a-space @click="handChangeCatalogueClick(false)">
                        <a-pagination :current="pagination.pageNum" :pageSize="pagination.pageSize" size="small"
                            :total="total" show-quick-jumper @change="paginChange" @showSizeChange="onShowSizeChange" />

                        <Speak :item="list[0]" type="array" v-if="!isCatalogue && list.length > 0"></Speak>
                    </a-space>
                </a-space>
            </div>
        </template>
    </div>
</template>
<script>
import moment from "moment";
import ZsSelectData from '../ZsSelectData.vue';
import Echarts from "@/components/Echarts/Echarts";
import ManageEchart from "@/components/ManageEchart/ManageEchart";
import { chineseCharactersNum } from '../js/js';
import PPTDelete from './PPTDelete.vue';
import PPTImgEdit from './PPTImgEdit.vue';
import Speak from '@/components/Speak/index';
import PPTTable from './PPTTable';
import showModalTable from '@/components/ZSTable/components/showModalTable';

export default {
    name: 'TemplatePPT',
    components: {
        ZsSelectData,
        Echarts,
        ManageEchart,
        PPTDelete,
        PPTImgEdit,
        Speak,
        PPTTable,
        showModalTable,
    },
    props: {
        menuId: {
            type: [String, Number],
            default: '',
        },
        onCallBackChange: {
            type: Function,
            default: () => { }
        }
    },
    data() {
        return {
            pagination: {
                pageSize: 1,
                pageNum: 1,
            },
            total: 0,
            loading: false,
            menuLoading: false,
            list: [],
            otherData: {
                startTime: '',
            },
            isCatalogue: true,
            catalogueInfo: {
                list: [],
                echartData: [],
            },
        }
    },
    methods: {
        paginChange(current, pageSize) {
            let newPaginTion = {
                ...this.pagination,
                pageNum: current,
                pageSize,
            };
            this.pagination = newPaginTion;
            this.questPostData(this.pagination);
        },
        questPostData(aData) {
            let data = {
                ...this.otherData,
                ...this.pagination,
                ...aData,
            };
            this.list = [];
            this.loading = true;
            this.postAxios(this.$getXLHiddenDesc, data)
                .then((res) => {
                    if (res.code === 200) {
                        this.list = res.data.records;
                        this.total = res.data.total;
                    }
                })
                .catch((err) => { })
                .finally(() => {
                    setTimeout(() => {
                        this.loading = false;
                    }, 300);
                });
        },
        handChangeCatalogueClick(e) {
            this.isCatalogue = e;
        },
        // 目录信息
        questPostCatalogu(aData) {
            this.isCatalogue = true;
            let data = {
                company: "605521150",
                type: 1,
                ...this.otherData,
                // 特殊补充
                fromType: '1',
                ...aData,
            };
            data['selectDate'] = data['startTime']
            this.list = [];
            this.menuLoading = true;
            this.postAxios(this.$hiddenPerilSearchDayNight, data)
                .then((res) => {
                    if (res.code === 200) {
                        this.catalogueInfo['echartData'] = res.data.hiddenDangerLoop
                    }
                })
                .catch((err) => { })
                .finally(() => {
                    this.menuLoading = false;
                });
        },
        // 获取当前时间下每条数据的目录项
        getXLHiddenContents(aData) {
            this.isCatalogue = true;
            let data = {
                company: "605521150",
                type: 1,
                ...this.otherData,
                ...aData,
            };
            data['selectDate'] = data['startTime']
            this.list = [];
            this.loading = true;
            this.postAxios(this.$getXLHiddenContents, data)
                .then((res) => {
                    if (res.code === 200) {
                        this.catalogueInfo['list'] = res.data.records
                    }
                })
                .catch((err) => { })
                .finally(() => {
                });
        },
        onShowSizeChange(current, pageSize) {
            let newPaginTion = {
                ...this.pagination,
                pageNum: current,
                pageSize,
            };
            this.pagination = newPaginTion;
            this.questPostData(this.pagination);
        },
        onCallBack(val, dataI) {
            let obj = this.otherData;
            obj[dataI] = val;
            this.otherData = JSON.parse(JSON.stringify(obj));
            let newPaginTion = {
                ...this.pagination,
                pageNum: 1,
            };
            this.pagination = newPaginTion;
            this.questPostData({ ...obj, ...newPaginTion });
            this.questPostCatalogu({ ...obj, ...newPaginTion });
            // this.getXLHiddenContents({ ...obj, ...newPaginTion });
        },
        colSpanf(l) {
            let res = 24;
            if (l && l.length > 0) {
                res = res / l.length;
            }
            return res;
        },
        // 日期格式化
        formMater(d, M) {
            return moment(d).format(M);
        },
        chineseCharactersNum(e) {
            return chineseCharactersNum(e);
        },
        // 点击跳转到相应的页面
        listHanderClick(e) {
            this.handChangeCatalogueClick(false);
            this.paginChange(e + 1, this.pagination.pageSize);
        },
        addCallBack() {
            this.questPostData();
            this.questPostCatalogu();
        }
    },
    computed: {
        imgPositionClass() {
            let res = false;
            let itemInfo = this.list[0];
            if (!this.isCatalogue && itemInfo) {
                res = itemInfo.imgPosition == 'right';
            }
            return res;
        }
    },
    mounted() {
        let nowD = moment().format("YYYY-MM-DD");
        this.otherData = {
            ...this.otherData,
            startTime: nowD,
        };
        this.questPostData();
        this.questPostCatalogu();
        // 屏蔽掉
        // this.getXLHiddenContents();
    }
}
</script>
<style lang="less" scoped>
.wrap {
    height: 100%;
    width: 100%;
    position: relative;
    // background-color: var(--backColor);
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 0;

    &::before {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: url(~@/assets/images/ppt/backImg.jpg);
        background-size: 100% 100%;
        z-index: -1;
        /* 设置伪元素的透明度，从而影响整个背景图像 */
        pointer-events: none;
    }

    &-head {
        height: 40px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0px 12px;
    }

    .imgPositionClass {
        flex-direction: row-reverse;
    }

    &-content {
        // height: calc(100% - 40px - 40px - 1px);
        height: calc(100vh - 20px - 142px);
        display: flex;
        flex-direction: row;
        // background-image: url(~@/assets/images/application/back.jpeg);
        // background-size: 100% 100%;
        width: 100%;

        &-catalogue {
            width: 100%;
            overflow-y: auto;
            overflow-x: hidden;

            &-title {
                width: 100%;
                text-align: center;
                font-size: 32px;
                padding: 12px 0px;
                font-weight: 560;
                position: sticky;
                top: 0px;
                z-index: 9;
                // background-color: #ffffff;
            }

            &-subTitle {
                // margin-left: calc(27%);
                width: 100%;
                // background-color: orange;
                // color: #035dff;
                text-align: center;
                font-size: 24px;
                padding: 6px 46px 0px;
                height: calc(30vh);

                .spaceRow {
                    width: 590px;
                    text-align: left;
                }

                // 第二版
                .newInfoWrap {
                    &-row {
                        &-item {
                            height: 100%;

                            &-wrap {
                                height: 100%;
                                min-height: 128px;
                                // border: 1px solid #cdcdcd;
                                padding: 8px 12px 24px 12px;
                                border-radius: 10px;
                                background-image: url(~@/assets/images/application/border.png);
                                background-size: 100% 100%;

                                &-num {
                                    font-size: 24px;
                                    font-weight: 560;
                                }

                                &-label {
                                    font-size: 20px;
                                }
                            }
                        }
                    }
                }
            }

            &-echarts {
                width: 100%;
                height: calc(60vh - 180px);
                // margin-top: 20vh;
                margin-top: 44px;
                // height: 300px;
                // background-color: orange;
            }
        }

        ::v-deep {
            .ant-empty-description {
                // color: #ffffff;
            }
        }

        &-left {
            width: 100%;
            padding: 0px 12px;

            &-top {
                height: 50%;
                position: relative;
            }

            &-end {
                height: 50%;
                position: relative;
            }

            &-info {
                position: absolute;
                left: 4px;
                top: 4px;
                font-size: 24px;
                font-weight: 560;
                z-index: 1;
                pointer-events: none;
            }
        }

        &-right {
            width: 75%;
            margin-top: 4.5vh;
            overflow-y: auto;

            &-top {
                height: 50px;
                font-size: 32px;
                font-weight: 560;
                text-align: center;
                // color: #035dff;
            }

            &-content {
                padding: 12px;
                font-size: 30px;
            }
        }

        &-empty {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }

    &-footer {
        background: rgba(255, 255, 255, 0.5);
        height: 40px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 0px 12px;
        border-top: 1px solid #cdcdcd;
    }
}



.autoClass {
    width: 100%;
    height: 100%;
}

.imgCol {
    position: relative;

    &:hover {
        ::v-deep {
            .PPTImgEditWrap {
                display: block;
            }
        }
    }
}

.autoHeight {
    height: 100%;
}

.blue {
    color: #364984;
}

.black {
    // color: #000000;
    font-weight: 560;
}

.yellow {
    color: yellow;
}

// 安全评价中的图片展示形式
.imgClass {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
</style>